import { SpotlightCardProps } from '@lobehub/ui';
import isEqual from 'fast-deep-equal';
import { FC, memo, useCallback } from 'react';
import { Flexbox } from 'react-layout-kit';
import LazyLoad from 'react-lazy-load';
import { useSessionStore } from '@/store/session';
import { sessionSelectors } from '@/store/session/selectors';

import { agentMarketSelectors, useMarketStore } from '@/store/market';

import AgentCardItem from './AgentCardItem';
import Loading from './Loading';
import { useStyles } from './style';

export interface AgentCardProps {
  CardRender: FC<SpotlightCardProps>;
  mobile?: boolean;
}

const AgentCard = memo<AgentCardProps>(({ CardRender, mobile }) => {
  const [useFetchAgentList] = useMarketStore((s) => [
    s.useFetchAgentList,
    s.searchKeywords,
  ]);
  const { isLoading } = useFetchAgentList();
  const [useFetchSessions] = useSessionStore((s) => [s.useFetchSessions]);
  useFetchSessions();

  const agentList = useMarketStore(agentMarketSelectors.getAgentList, isEqual);
  const defaultSessions = useSessionStore(sessionSelectors.defaultSessions, isEqual);

  console.log(agentList, 'ni')
  const { styles } = useStyles();
  const GridRender: SpotlightCardProps['renderItem'] = useCallback(
    (props: any) => (
      <LazyLoad className={styles.lazy}>
        <AgentCardItem {...props} />
      </LazyLoad>
    ),
    [styles.lazy],
  );

  if (isLoading) return <Loading />;

  return (
    <Flexbox gap={mobile ? 16 : 24}>
      <CardRender items={defaultSessions.slice(0, 6)} renderItem={GridRender} />
    </Flexbox>
  );
});

export default AgentCard;
